<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>Doran的个人空间</title>
    <link rel="stylesheet" href="./styles/common.css">
    <link rel="shortcut icon" href="./images/favico.ico">

    <!-- 三方库 -->
    <script src="libs/jquery/jquery-3.6.3.min.js"></script>
    <script src="libs/SplitText.min.js"></script>
    <script src="libs/greensock-js/TweenMax.min.js"></script>
    <script src="libs/greensock-js/TimelineMax.min.js"></script>
    <script src="libs/three/three.min.js"></script>

    <!-- 相关依赖脚本优先加载 -->
    <script src="js/AirPlane.js"></script>
    <script src="js/homeAnimation.js"></script>

    <!-- 脚本主入口 -->
    <script src="js/main.js"></script>
</head>

<body>
    <div class="wrapper">
        <div class="home-header">
            <div class="home-header__left">
                <img src="./images/favico.ico" class="home-header__icon">
                <span class="home-header__title">Doran</span>
            </div>
            <div class="home-header__right">
                <a class="home-header__item" href="https://github.com/wonanut">
                    <span class="home-header__item-name">Github</span>
                </a>
            </div>
        </div>
        <div class="home-body">
            <section class="home-body__section">
                <div class="home-left">
                    <div class="home-left__wrapper">
                        <div class="home-left__background">
                            <span class="home-left__background-circle1"></span>
                            <span class="home-left__background-circle2"></span>
                        </div>
                        <div class="home-left__welcome-wrapper">
                            <div class="home-left__welcome">
                                <div class="home-left__title-wrapper">
                                    <h1 class="home-left__title">尝试热衷于一些事情</h1>
                                    <h2 class="home-left__desc">人生无常，我们总是会被当下无休止的事物所困扰，想逃避工作、拒绝沟通。我尝试思考如何以正确的心态面对工作，目前还没有得到较好的答案。那就，趁着有闲暇时光，做一些自己想做的事吧！</h2>
                                </div>
                                <div class="home-left__title-en-wrapper">
                                    <h1 class="home-left__title-en">TRY TO DO SOMETHING DELIGHTFUL</h1>
                                    <h2 class="home-left__desc-en">I tried to think about how to face work with a correct attitude, but I haven't got a better answer yet. Then, when you have free time, do something you want to do!</h2>
                                </div>
                                <div class="home-left__personal-info">
                                    <img src="./images/personal-image.jpg" class="home-left__image">
                                    <p class="home-left__name">Doran</p>
                                    <p class="home-left__signature">热爱生活且热爱视觉呈现的小熊猫</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="home-right">
                    <div class="home-right__wrapper">
                        <div class="home-right__3d"></div>
                    </div>
                </div>
            </section>
            <section class="home-body__section">
                <div class="index-wrapper">
                    <div class="index-header">
                        <h1 class="index-header__title">Doran的个人空间</h1>
                    </div>
                    <div class="index-body">
                        <div class="index-body__cards">
                            <div class="index-body__card">
                                <div class="index-body__card-title">技术博客</div>
                            </div>
                            <div class="index-body__card">
                                <div class="index-body__card-title">生活日历</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <div id="progress-bar"></div>
</body>

</html>